<template>
  <div>
    <input type="text" v-model="newTodo" @keyup.enter="addTodo">
    <button @click="changeStatus('all')">全部</button>
    <button @click="changeStatus('done')">已完成</button>
    <button @click="changeStatus('notDone')">未完成</button>
  </div>
</template>

<script setup lang="ts">
import { ref, defineEmits } from 'vue'

const newTodo = ref<string>('')

const emit = defineEmits<{(e: 'onChangeStatus', status: string): void, (e: 'onAdd', newTodo: string): void }>()

const addTodo = () => {
  emit('onAdd', newTodo.value)
  newTodo.value = ''
}
const changeStatus = (status: string) => {
  emit('onChangeStatus', status)
}
</script>

<style scoped>

</style>
